<template>
	<span class="appellation" :style="{ color: color, fontSize: fontSize + 'rpx' }">{{ appellation }}</span>
</template>

<script lang="ts" setup>
	import { autorun } from 'mobx'
	import { onUnmounted, ref } from '@/im/transformVue'

	import { deepClone } from '@/im/util'

	const appellation = ref('')
	const { account, teamId, ignoreAlias, nickFromMsg } = defineProps({
		account: {
			type: String,
			required: true,
		},
		teamId: {
			type: String,
			default: null,
		},
		ignoreAlias: {
			type: Boolean,
			default: false,
		},
		nickFromMsg: {
			type: String,
			default: null,
		},
		color: {
			type: String,
			default: '#101010',
		},
		fontSize: {
			type: Number,
			default: 32,
		},
	})

	const uninstallAppellationWatch = autorun(() => {
		appellation.value = deepClone(
			// @ts-ignore
			uni.$UIKitStore?.uiStore?.getAppellation({
				account,
				teamId,
				ignoreAlias,
				nickFromMsg,
			})
		)
	})
	onUnmounted(() => {
		uninstallAppellationWatch()
	})
</script>

<style scoped lang="scss">
	.appellation {
		color: #101010;
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>